<template>
  <div style="margin-top: 20px; " >
    <!--添加导航按钮-->
    <el-button @click="dialogVisible=true" style="margin-left: -90%;background-color: orange;color: white;width: 120px;height: 30px" >
      添加导航
    </el-button>
    <el-dialog  v-model="dialogVisible" > {{tableDataAdd.id==null?'发布内容':'修改内容'}}
      <el-form label-width="100px">
        <el-form-item label="导航名称:">
          <el-input v-model="tableDataAdd.name" placeholder="导航名称"></el-input>
        </el-form-item>
        <el-form-item label="导航级别:">
          <el-input v-model="tableDataAdd.level" placeholder="导航级别" ></el-input>
        </el-form-item>
        <el-form-item label="跳转地址:">
          <el-input v-model="tableDataAdd.url" placeholder="跳转地址" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button
                v-if="tableDataAdd.id==null"
                type="primary" style="width:100%;" @click="add()">添加</el-button>
            <el-button
                v-if="tableDataAdd.id!=null"
                type="primary" style="width:100%;" @click="update()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

  <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;margin-top: 20px" >
    <el-table-column property="id" label="Id" width="150"  />
    <el-table-column property="name" label="导航名称" width="150" />
    <el-table-column property="level" label="导航级别" />
    <el-table-column property="url" label="跳转地址" />
    <el-table-column label="状态">
      <template #default="scope">
        <el-switch v-model="scope.row.isStart" :active-value="1" :inactive-value="0" @change="changeStart(scope.row)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="120" >
      <template #default="scope">{{ scope.row.createTime }}</template>
    </el-table-column>
    <el-table-column label="操作" width="180" align="center">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.row)">删除</el-button>
        <el-button  type="primary" @click="editor(scope.row)" >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 25, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      style="margin-top: 10px;">
  </el-pagination>
</template>

<script setup>
import {onMounted, ref } from 'vue'
import axios from "axios";
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";


//控制添加用户弹窗是否出现，默认false
const dialogVisible=ref(false);


// const tableData=[
//   {id:1,name:"首页",url:'/index',level:'1',date:'2024/4/10',isStart:0},
//   {id:2,name:"详情页",url:'/detail',level:'1',date:'2024/4/10',isStart:0},
//   {id:3,name:"总列表页",url:'/list',level:'1',date:'2024/4/10',isStart:0},
//   {id:4,name:"热门城市列表页",url:'/hotCity',level:'1',date:'2024/4/10',isStart:0},
//   {id:5,name:"房屋详情页",url:'/house',level:'1',date:'2024/4/10',isStart:0},
//   {id:6,name:"租房列表页",url:'/renthouse',level:'1',date:'2024/4/10',isStart:0},
//   {id:7,name:"发布房源",url:'/releasehouse',level:'1',date:'2024/4/10',isStart:0},
//
// ];
const tableData=ref([]);
const tableDataAdd=ref([]);




//增加导航
const  add=()=>{
  let data=qs.stringify(tableDataAdd.value);
  console.log(data);
  axios.post('http://localhost:8082/navgation/navgationAdd',data)
      .then((response)=>{
        if(response.data.code==2001){
          dialogVisible.value=false;/*点击添加后，让添加导航框消失*/
          ElMessage.success('添加成功');
          loadContents();
        }
      })

}
//删除导航
const del=(r)=>{
    console.log(r);
  if (confirm('您确认要删除contentId为：'+r.id+'的数据数据吗?')){
    axios.post('http://localhost:8082/navgation/'+r.id+'/navgationDelete')
        .then((response)=>{
          if(response.data.code==2001){
            //arr.value.splice(id,1)
            ElMessage.success('删除成功!');
            loadContents();
          }
        })
  }

}
//修改启动状态
const changeStart=(r)=>{
  console.log("修改启动状态"+r.id);

  tableDataAdd.value=r;
  const start=r.isStart==1?1:0;
  console.log(start);
  tableDataAdd.value.isStart=start;
  console.log(tableDataAdd.value);
  console.log("内容:"+tableDataAdd.value);


  let data=qs.stringify(tableDataAdd.value);
  console.log("修改data："+data)
  axios.post('http://localhost:8082/navgation/navgationUpdate',data)
      .then((response)=>{
        if(response.data.code==2001){
          dialogVisible.value=false;/*点击添加后，让添加导航框消失*/
          ElMessage.success('修改成功');
          loadContents();
        }
      })

}

//编辑一条导航 1.先把数据查出来放到框里
const editor=(r)=>{
  dialogVisible.value=true
  console.log(r);
    axios.get('http://localhost:8082/navgation/'+r.id+'/navgationSelect')
        .then((response)=>{
          if(response.data.code==2001){
            tableDataAdd.value=response.data.data;
            console.log(tableDataAdd.value);
            //arr.value.splice(id,1)
            loadContents();
          }
        })
}
//2.执行修改
const update=()=>{
  let data=qs.stringify(tableDataAdd.value);
  console.log("修改data："+data)
  axios.post('http://localhost:8082/navgation/navgationUpdate',data)
      .then((response)=>{
        if(response.data.code==2001){
          dialogVisible.value=false;/*点击添加后，让添加导航框消失*/
          ElMessage.success('修改成功');
          loadContents();
        }
      })
}

//重新加载数据
const loadContents=()=>{
  axios.get('http://localhost:8082/navgation/navgationAll')
      .then((response)=>{
        if (response.data.code==2001){
          console.log(response.data.data);
          tableData.value=response.data.data;
        }
      });
}

//查询所有
const initData=()=>{
  axios.get('http://localhost:8082/navgation/navgationAll')
      .then((response)=>{
        if (response.data.code==2001){
          console.log(response.data.data);
          tableData.value=response.data.data;
        }
      });
}

const currentPage=ref(1);
const pageSize=ref(5);

// @size-change页码展示数量点击事件
const handleSizeChange =(val)=> {
  // 更新每页展示数据size
  pageSize.value = val;
}
// @current-change页码点击事件
const handleCurrentChange =(val)=> {
  // 更新当前页数是第几页
  currentPage.value = val;
}

onMounted(()=>{
  initData();
  console.log('数组的值:'+tableData.value);
})

</script>